<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影信息查询</title>

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./lib/layui/css/layui.css"/>
    <!--引入页面css-->
    <link rel="stylesheet" href="./css/Common.css">
    <link rel="stylesheet" href="./css/MyOrderPage.css">
    <!-- 引入 layui.js -->
    <script src="./lib/layui/layui.js"></script>
    <!--引入jquery.js-->
    <script src="./lib/jquery-tool/jquery-3.4.1.min.js"></script>
    <!--引入axios-->
    <script src="./lib/axios-tool/axios.min.js"></script>
</head>
<body>
<div class="cinema-header-container"></div>
<div class="order-all-container">
    <!--订单模块标题-->
    <fieldset class="layui-elem-field layui-field-title">
        <legend style="font-size: 30px">订单列表</legend>
    </fieldset>
    <!--订单补充说明-->
    <blockquote id="order-quote" class="layui-elem-quote"></blockquote>
    <!--  订单表格  -->
    <table id="orders-table" lay-filter="orders-table"></table>


</div>


<script src="./js/Common.js"></script>
<script>
    axios.defaults.withCredentials = true;    //发送请求携带session信息
    var urlPrefix = 'http://localhost:9093';

    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

    });
    // console.log(userId);
    //检查登录信息，并存储userId
    axios({
        method: 'get',
        url: 'http://localhost:9090/user/getUserFromSession',
    }).then(res => {
        console.log(res);
        if (res.data.status !== 0) {
            $(location).attr('href', './LoginPage.html');
        } else {
            //设置顶部导航栏
            initNavHeader('my-order-item');
            $('#user-id-block').html(
                '<i class="layui-icon layui-icon-username"></i> ' + res.data.data.userId + '<i class="layui-icon layui-icon-triangle-d"></i>'
            );

            //记录页面的userId
            var userId = res.data.data.userId;
            console.log(userId);
            generateOrdersTable(userId);
        }
    });

    //生成订单表格
    //由于layui自动渲染无法传递session，所以使用转换静态表格的方法进行
    function generateOrdersTable(userId) {
        axios({
            method: 'get',
            url: urlPrefix + '/order/getOrdersByUserId?userId=' + userId,
        }).then(res => {
            console.log(res);
            var orderList = []
            if (res.data.status === 0) {
                //开始生成html语句
                orderList = res.data.data;
                console.log(orderList);
                var tableHeadHtml =
                    '<thead>' +
                    '   <tr>' +
                    '      <th lay-data="{field: \'orderId\', fixed: \'left\'}">订单ID</th>' +
                    '      <th lay-data="{field: \'userId\'}">订单用户</th>' +
                    '      <th lay-data="{field: \'hallId\'}">影厅ID</th>' +
                    '      <th lay-data="{field: \'filmId\'}">电影ID</th>' +
                    '      <th lay-data="{field: \'filmName\'}">电影名称</th>' +
                    '      <th lay-data="{field: \'filmDate\'}">电影日期</th>' +
                    '      <th lay-data="{field: \'timePeriod\'}">放映时段</th>' +
                    '      <th lay-data="{field: \'ticketsNum\'}">电影票数量</th>' +
                    '   </tr>' +
                    '</thead>';
                var tableBodyHtml = '<tbody>';
                for (var order of orderList) {
                    tableBodyHtml +=
                        '<tr>' +
                        '   <td>' + order.orderId + '</td>' +
                        '   <td>' + order.userId + '</td>' +
                        '   <td>' + order.hallId + '</td>' +
                        '   <td>' + order.filmId + '</td>' +
                        '   <td>' + order.filmName + '</td>' +
                        '   <td>' + order.filmDate + '</td>' +
                        '   <td>' + order.timePeriod + '</td>' +
                        '   <td>' + order.ticketsNum + '</td>' +
                        '</tr>'
                }
                tableBodyHtml += '</tbody>';
                $('#orders-table').html(tableHeadHtml + tableBodyHtml);

                //将普通的表格渲染成layui表格
                layui.use('table', function () {
                    var table = layui.table;

                    table.init('orders-table', {
                        height: 500, //设置高度
                        // , limit: 8 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                        limit: orderList.length
                        //支持所有基础参数
                        , toolbar: '#orderToolBar'
                    });
                })
            }

            //将引用字段填充字段
            var quoteHtml =
                '用户 <a style="color: #FF5722">' + userId + '</a> 的订单数量是：<a style="color: #FF5722">' + orderList.length + '</a>条。';
            $('#order-quote').html(quoteHtml);
        });
    }
</script>
<!--表格头部工具栏-->
<script type="text/html" id="orderToolBar">

</script>
</body>
</html>